<template>
  <div class="addcompany">
    <el-dialog :title="title" :visible="showDialog" @close="onClose">
      <!-- 表单 -->
      <el-form
        ref="addFormRef"
        :model="addForm"
        :rules="rules"
        label-width="140px"
        class="demo-ruleForm"
        style="padding-right:150px"
      >
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="addForm.shortName" />
        </el-form-item>

        <el-form-item label="所属公司" prop="company">
          <el-input v-model="addForm.company" />
        </el-form-item>

        <el-form-item>
          <el-row type="flex">
            <span
              >https://www.tianyancha.com （在此可查询所属公司全称及简称）</span
            >
          </el-row>
        </el-form-item>

        <el-form-item label="城市地区" prop="city">
          <el-select
            v-model="addForm.city"
            placeholder="请选择活动区域"
            style="width:49%;margin-right:2%"
            @change="cityChange"
          >
            <el-option
              v-for="(item, index) in city"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-select
            v-model="addForm.province"
            placeholder="请选择活动区域"
            style="width:49%"
            @change="provincechange"
          >
            <el-option
              v-for="(item, index) in province"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="方向（企业标签）" prop="tags">
          <el-input v-model="addForm.tags" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="addForm.remarks" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row type="flex" justify="center">
          <el-button @click="onClose">取 消</el-button>
          <el-button type="primary" @click="btnOk">确 定</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { editCompanys, addCompanys } from '@/api/companys'
import { provinces, citys } from '@/api/citys'
export default {
  name: '',
  components: {},
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    addForm: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      rules: {
        shortName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '请输入所属公司', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请选择城市地区', trigger: 'change' }
        ],
        tags: [
          { required: true, message: '请输入方向（企业标签）', trigger: 'blur' }
        ],
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      city: '',
      province: '',
      cityValue: '',
      provinceValue: ''
    }
  },
  computed: {
    title() {
      if (this.addForm.id) {
        return '编辑'
      } else {
        return '新增'
      }
    }
  },
  watch: {},
  created() {
    this.city = provinces()
  },
  mounted() {},
  methods: {
    // 提交
    async btnOk() {
      if (this.addForm.id) {
        try {
          // console.log({
          //   ...this.addForm,
          //   isFamous: this.addForm.isFamous === 1,
          //   city: this.cityValue ? this.cityValue : this.addForm.city,
          //   province: this.provinceValue
          //     ? this.provinceValue
          //     : this.addForm.province
          // })
          await editCompanys({
            ...this.addForm,
            isFamous: this.addForm.isFamous === 1,
            city: this.cityValue ? this.cityValue : this.addForm.city,
            province: this.provinceValue
              ? this.provinceValue
              : this.addForm.province
          })

          this.$emit('btnOk')
          this.$emit('update:showDialog', false)
          this.$message.success('修改成功')
        } catch (err) {
          this.$message.error('操作失败')
        }
      } else {
        try {
          await addCompanys({
            ...this.addForm,
            isFamous: this.addForm.isFamous === 1,
            city: this.cityValue ? this.cityValue : this.addForm.city,
            province: this.provinceValue
              ? this.provinceValue
              : this.addForm.province
          })
          this.$emit('btnOk')
          this.$emit('update:showDialog', false)
          this.$message.success('添加成功')
        } catch (err) {
          this.$message.error('操作失败')
        }
      }
    },
    // 关闭
    onClose() {
      this.$refs.addFormRef.resetFields()
      this.$emit('onClose')
      this.$emit('update:showDialog', false)
    },
    // 城市选择
    cityChange(v) {
      this.province = citys(v)
      this.cityValue = v
    },
    provincechange(v) {
      this.provinceValue = v
    }
  }
}
</script>
<style lang="less" scoped></style>
